import React, { Component } from 'react';

//导入路由跳转的组件
import { Link, NavLink } from 'react-router-dom';
class ComC extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: 'hello',
            blogURL: '/blog'
        }
    }
    valChange(e) {
        // console.log(e.target.value);
        this.setState({
            msg: e.target.value
        })
    }

    changePage(url) {
        // 编程时导航
        this.props.history.push(url)
        // replace:替换历史记录
        // go:前进或者后退
        // goBack：后退
    }
    render() {
        return (<div>
            <p>react模拟实现表单的双向绑定</p>
            <input onChange={(e) => this.valChange(e)} value={this.state.msg} />
            <p>输入框中的值:{this.state.msg}</p> <NavLink to='/index' activeClassName='aaa'>首页</NavLink>
            <Link to={this.state.blogURL}>Blog页面</Link>
            <Link to='/ComFather'>父组件页面</Link>
            <p>NavLink这个组件，可以指定是连接被激活时拥有的class，默认是：class="active"</p>
            <p>NavLink这个组件的activeClassName属性可以修改激活时class的值</p>
            <hr />
            <button onClick={this.changePage.bind(this, '/index')}>首页</button>
            <button onClick={this.changePage.bind(this, '/blog')}>Blog页面</button>
            <button onClick={this.changePage.bind(this, '/ComFather')}>父组件</button>
        </div>)
    }
}
export default ComC